<template>
  <Header/>
  <Center/>
  <div class="footer" v-if="show" v-html="show_str" ref="footRef">
  </div>
</template>

<script>
import Header from "./components/Header";
import Center from "./components/Center";

import {nextTick, provide, ref} from "vue";

export default {
  name: "App",
  components: {
    Header,
    Center
  },
  setup() {
    // 是否显示底部调试组件
    let show_str = ref(''),
        show = true,
        footerHeight=250,
        footRef = ref(null),
        str = '';
    let catchEvent = async (...args) => {
      if (!footerHeight) return;
      str += `<div class="footer_list" >
                <div class="footer_item">事件:
                  <span>${args[0]}</span>
                </div>
                <div class="footer_item">方法:
                  <span>${args[1]}</span>
                </div>
                <div class="footer_item">数据:
                  <span>${JSON.stringify(args[2])}</span>
                </div>
              </div>`;
      show_str.value = str;
      await nextTick();
      footRef.value.scrollTop = footRef.value.scrollHeight
    }

    provide('footerInfo', {show,footerHeight});
    provide('catchEvent', catchEvent)
    return {
      show,
      show_str,
      footRef,
      footerHeight:footerHeight+'px'
    }
  }
}
</script>
<style lang="less">
#app {
  background: rgb(192, 204, 212);
}

.el-table__inner-wrapper {
  th {
    background-color: #dfe6fb !important;
  }
}

.el-table {
  .cell {
    text-align: center;
  }
}

.footer {
  height: v-bind(footerHeight);
  background: #000;
  overflow: scroll;

  .footer_list {
    margin-left: 10px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    color: white;
    font-size: 12px;

    .footer_item {
      margin: 2px;

      &:first-child {
        width: 20%;
      }

      &:nth-child(2) {
        width: 20%;
      }

      span {
        color: greenyellow;
      }
    }
  }
}
.my-popper{
  --el-text-color-primary: rgba(52, 67, 79,0.8);
  .btn-list-2{
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    height: 65px;
    align-items: center;
    .btn-item-2 {
      width: 45px;
      //background: rgb(52, 67, 79);
      cursor: pointer;
      position: relative;
      display: flex;
      flex-wrap: wrap;
      padding: 7px;
      justify-content: center;
      &:hover{
        &:after{
          content: "";
          display: inline-block;
          width: 100%;
          height: 4px;
          background: #06ceae;
          border-radius: 2px;
          position: absolute;
          left: 0;
          bottom: -1px;
        }
      }
      &.active{
        &:after{
          content: "";
          display: inline-block;
          width: 100%;
          height: 4px;
          background: #06ceae;
          border-radius: 2px;
          position: absolute;
          left: 0;
          bottom: -1px;
        }
      }
    }
  }
}
</style>
